<template>
  <div class="index-container todo-setstock">
    <van-notice-bar v-if="noticeTxt" scrollable :text="noticeTxt" />
    <van-nav-bar title="待办事项" fixed left-arrow @click-left="onClickLeft" />
    <div class="set-stock-form">
      <div class="inner-form">
        <div class="txt-area-row">
          <span class="form-label">商品名称:</span>
          <span class="form-content">{{$route.query.name}}</span>
        </div>
      <van-divider />
        <div class="txt-area-row">
          <span class="form-label">当前库存数量:</span>
          <span class="form-content" style="color: #f45c4c; font-size: 15px">{{$route.query.realStock}} 个</span>
        </div>
        <div class="txt-area-row" style="margin:0">
          <span class="form-label">安全库存数量:</span>
          <span class="form-content">{{$route.query.safeStock}} 个</span>
        </div>
      </div>
      <div class="set-form">
        <div class="txt-area-row" style="margin:0">
          <span class="form-label">修改库存数量:</span>
          <span class="form-content">
            <input type="text" placeholder="请填写" v-model.number="qstock" min="1" oninput="value=value.replace(/[^\d]/g,'')" style="width:60px;border:none" /> 个
          </span>
        </div>
      </div>
    </div>
    <div class="btns">
      <div class="btn b1" @click="onClickLeft">取消</div>
      <!-- <div class="btn b2" v-if="!loading" @click="handleConfirm">确认</div> -->
      <van-button class="btn b2" style="border:none" :loading="loading"  @click="handleConfirm">确认</van-button >
    </div>
    <van-dialog v-model="showDialog" title="提示" :confirmButtonText="'采购账户充值'" show-cancel-button @confirm="createTrueTask">
      <div style="padding: 10px">
        <p>本次修改后自建商品的售总价预计为<span class="red">{{ totalSalePrice }}</span> 元</p>
        <p>当前采购账户余额（不含待确认订单额）为 <span class="red">{{ pickerPrice }}</span> 元</p>
        <p><span class="red">小于</span> 自建商品预估销售总价, <span style="font-weight: bold">库存无法修改或商品无法上架</span> </p>
        <p>建议：1）请为采购账户充值之后再次尝试此操作 2）前往PC端调整自建商品可售库存后再次尝试此操作）</p>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import { editStock } from '@/api/order'
export default {
  data() {
    return {
      qstock: null,
      name: null,
      skuId: null,
      realStock: null,
      safeStock: null,
      loading: false,
      todoList: [],
      pickerPrice: null,
      totalSalePrice: null,
      showDialog: false
    }
  },
  computed: {
    noticeTxt() {
      return this.$store.state.app.noticeTxt
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    handleConfirm() {
      this.loading = true
      const skuId = this.$route.query.skuId
      const sendData = {
        relSkuId: skuId,
        realStock: this.qstock
      }
      editStock(sendData).then(res => {
        if (res.data && res.data.amountMessage) {
          this.showDialog = true
          this.totalSalePrice = res.data.totalSalePrice
          this.pickerPrice = res.data.pickerPrice
        } else {
          this.$toast('修改成功!')
          this.$router.go(-1)
        }
      })
    },
    createTrueTask() {
      this.$router.push('/moneyApply?flag=1')
    }
  }
}
</script>
<style scoped lang="scss">
.todo-setstock {
  height: 100vh;
  overflow: hidden;
  background:#F1F0F5;
  font-size: 15px;
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .set-stock-form{
    margin: 0 0 0px 0;
  }
  .set-stock-form{
    .inner-form{
      background: #fff;
      padding:15px;
    }
  }
  .set-form{
    background: #fff;
    padding:15px;
    margin:15px 0 0 0;
  }
  .txt-area-row{
    margin:0 0 10px 0;
    .form-label{
      width:105px;
      color:#999;
      display: inline-block;
    }
    .form-content{color:#333}
  }
   .btns {
    display: flex;
    justify-content: space-between;
    width: 345px;
    margin-left: 15px;
    margin-top: 40px;
    .btn {
      width: 160px;
      height: 38px;
      line-height: 38px;
      text-align: center;
      border-radius: 20px;
      font-size: 14px
    }
    .b1 {
      border: 1px solid #888888;
      background:#fff;
      color: #888888;
    }
    .b2 {
      background: #FC4A38;
      color: #fff;
    }
  }
}
</style>
